<?php
$treeData = $this->treeData;
?>

<style type="text/css">
    #divTemplateContainer{
        padding: 5px;
    }

    #divTemplateContainer #templateInfo{
        padding: 5px;

    }

    #divTemplateContainer #templateEditContainer{
        padding: 5px;
        background-color: #DDE4ED;
    }
</style>
<div class="ad_title_ctn">
    <h2>Thêm template</h2>
</div>
<div class="ad_content_ctn">
    <div class="control_ctn">
        <a href="javascript:saveTemplate();" class="k-button k-button-icontext k-grid-edit k-grid-edit k-grid-edit"><span>Lưu</span></a>
    </div>
    <fieldset style="margin: 10px 5px">
        <legend>Thông tin cơ bản</legend>
        <div id="basic_info_ctn">
            <table style="width:100%;" cellpadding="0" cellspacing="0">
                <tr>
                    <td style="width:60%; vertical-align: top;">
                        <div>

                            <div style="display: block;">
                                <div class="label_100 left">
                                    Tên:
                                </div>
                                <div class="left">
                                    <input id="txtName" name="txtName" style="width:250px" class="k-textbox" required validationMessage="Chưa nhập tên template">
                                    <span class="k-invalid-msg" data-for="txtName"></span>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div style="display: block;">
                                <div class="label_100 left">
                                    Mô tả:
                                </div>
                                <div style="float: left; ">
                                    <input id="txtDescription" name="txtDescription" style="width:450px"  class="k-textbox" valired validationMessage="Chưa nhập mô tả template">
                                    <span class="k-invalid-msg" data-for="txtDescription"></span>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div style="display: block;">
                                <div class="label_100 left">
                                    Tên file:
                                </div>
                                <div style="float: left; ">
                                    <?php
                                    echo '<select id ="txtFile">';
                                    foreach (\Core\Helper\ApplicationDirectoryHelper::getAllTemplateFile() as $templateName) {
                                        echo '<option value="'.$templateName.'">'.$templateName.'</option>';
                                    }

                                    echo '</select>';
                                    ?>
                                </div>
                                <div class="clear"></div>
                            </div>

                        </div>
                    </td>
                    <td style="width:40%; vertical-align: top;">

                        <div style="padding-top: 5px;  text-decoration: underline; font: bold 1em Verdana, Arial, Helvetica, sans-serif;">
                            Ảnh mẫu template
                        </div>
                        <div style="padding: 5px 0px 5px 0px">
                            <a href="javascript:upImg()" id="lnkUpImage"  style="width:100px;"><span>Upload ảnh</span></a>
                            &nbsp;&nbsp;&nbsp;
                            <a href="javascript:removeImg()" id="lnkRemoveImage"  style="width:100px;"><span>Xóa ảnh</span></a>

                        </div>
                        <div style="padding: 5px">
                            <div style="padding: 5px ;height:150px; width:150px; border: 1px solid #CCC" align="center">
                                <img id="imgPresent" src="/public/images/core/blank.jpg" style="max-width:140px; max-height: 140px">


                            </div>
                            <div style="padding: 5px">
                                <span style="font: bold 12px Verdana, Arial, Helvetica, sans-serif;" id="spnImgPresent"></span>
                            </div>

                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </fieldset>

    <fieldset>
        <legend>Template</legend>
        <div style="position: relative; padding: 5px" id="divTemplateContainer">
            <div id="templateInfo"></div>
            <div id="templateEditContainer">
                <a href="javascript:openTemplateAdd();"><i class="fa fa-eye"></i>&nbsp;Sửa template</a>
            </div>

        </div>
    </fieldset>

</div>



<script type="text/javascript">
var validator;
$(document).ready(function() {
    $("#txtFile").kendoComboBox({
        //make data limit in value set
        change : function (e) {
            if (this.value() && this.selectedIndex == -1) {
                var dt = this.dataSource._data[0];
                this.text(dt[this.options.dataTextField]);
                this._selectItem();
            }
        }
    });
    validator = $("#basic_info_ctn").kendoValidator().data("kendoValidator");



});


function openTemplateAdd(){
    templateFile = $("#txtFile").val();
    url = '/admin/template/edit-temp?file_path='+templateFile;
    win=window.open(url, '_blank');
    win.focus();
}

function validate(){
    return validator.validate()
}

function saveTemplate(){
    if(!validate()) {
        return;
    }
    name = $("#txtName").val();
    description = $("#txtDescription").val();
    filePath = $("#txtFile").val();
    imgPath = $("#spnImgPresent").html();

    tmpArr =  [];
    for (var obj in blockMap) {
        tmpArr.push(obj+"$$$"+blockMap[obj]);
    }
    $.post('/admin/template/save',{name:name,description:description, filePath:filePath,imgPath:imgPath
        , blockArr:tmpArr
    },function(result){
        if (result.success){
            window.location = "/admin/template"
        }else{
            $("#error_ctn").html(result.msg);
        }

    },'json');
}

function upImg(){
    try{
        var finder = new CKFinder();
        finder.basePath = '/public/js/ckfinder/';
        finder.selectActionFunction = setThumbFile;
        finder.popup();
    }catch(err){

    }
}
function setThumbFile( fileUrl )
{
    $("#imgPresent").attr("src", $.getCmsThumb(fileUrl) );
    $("#spnImgPresent").html(fileUrl);
    $("#lnkRemoveImage").show();
}

function removeImg(){
    $("#imgPresent").attr("src", "/public/images/core/blank.jpg" );
    $("#spnImgPresent").html("");
    $("#lnkRemoveImage").hide();
    $("#lnkUpImage").show();
}


$("#txtFile").change(function(){
//    loadTemplate($(this).val());

})


var blockMap = [];

</script>

